<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<!-- <u-icon name="arrow-left" color="#020121" size="34"></u-icon> -->
			</view>
			<view class="r-name">订单</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="tab f" :style="{marginTop: navHeiht+ 'px'}">
			<u-tabs gutter="36" :show-bar="false" @change="changeTab" ref="tabs1" :list="list" active-color="#020121"
				inactive-color="#606266" font-size="30" v-model="current"></u-tabs>

		</view>
		<view class="content p-32">
			<view class="list" :style="{marginTop: tabHeight+ 'px'}">
				<OrderCard />
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight
	} from '@/utils/util'
	import OrderCard from '@/compoment/card/orderCard.vue'


	const current = ref(0)
	const list = ref([{
		name: '全部',
		id: ''
	}, {
		name: '待接单',
		id: 0
	}, {
		name: '制作中',
		id: 1
	}, {
		name: '待收货',
		id: 2
	}, {
		name: '已完成',
		id: 3
	}])

	const changeTab = (index) => {
		current.value = index
	}

	// 获取元素高度
	const navHeiht = ref(0)
	const tabHeight = ref(0)
	onMounted(async () => {
		const res = await getElementHeight('.f')
		navHeiht.value = res
		const tabRes = await getElementHeight('.tab')
		tabHeight.value = tabRes
	})
</script>

<style lang="scss" scoped>
	.home-content {
		margin: 0 32rpx;
	}

	.r-name {
		color: #020121;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.content {}
</style>